<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快记账单</title>
    <link rel="stylesheet" href="styles.css">
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 登录/注册容器 -->
    <div id="loginContainer">
        <div class="login-form">
            <h2 id="formTitle">登录</h2>
            <form id="authForm">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" id="username" class="form-control" required>
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" id="password" class="form-control" required>
                </div>
                <div class="form-group" id="confirmPasswordGroup" style="display: none;">
                    <label for="confirmPassword">确认密码</label>
                    <input type="password" id="confirmPassword" class="form-control">
                </div>
                <button type="submit" class="btn btn-primary" id="authButton">登录</button>
            </form>
            <div class="switch-form" id="switchForm">没有账号？点击注册</div>
        </div>
    </div>

    <!-- 主内容区域 -->
    <div class="container main-content hidden">
        <!-- 头部 -->
        <header class="header">
            <h1>快记账单</h1>
            <div class="header-buttons">
                <button class="action-btn" onclick="showPersonalCenter()">个人中心</button>
                <button class="action-btn" id="exportBtn" onclick="exportData()" disabled>导出数据</button>
                <button class="action-btn" id="importBtn" onclick="document.getElementById('importFile').click()">导入数据</button>
                <input type="file" id="importFile" accept=".json" style="display: none" onchange="importData(this.files[0])">
                <button class="action-btn" id="logoutBtn" onclick="logout()" style="display: none;">退出登录</button>
            </div>
        </header>

        <!-- 主要内容 -->
        <div class="content-wrapper">
            <!-- 输入表单 -->
            <div class="input-section">
                <h2>添加记录</h2>
                <form id="expenseForm">
                    <div class="form-group">
                        <label>类型</label>
                        <div class="type-selector">
                            <input type="radio" id="expense" name="type" value="expense" checked>
                            <label for="expense">支出</label>
                            <input type="radio" id="income" name="type" value="income">
                            <label for="income">收入</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="amount">金额</label>
                        <input type="number" id="amount" class="form-control" step="0.01" required>
                    </div>
                    <div class="form-group" id="categoryGroup">
                        <label for="category">分类</label>
                        <select id="category" class="form-control" required>
                            <option value="food">餐饮</option>
                            <option value="transport">交通</option>
                            <option value="shopping">购物</option>
                            <option value="entertainment">娱乐</option>
                            <option value="other">其他</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="date">日期</label>
                        <input type="date" id="date" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="description">描述</label>
                        <input type="text" id="description" class="form-control" required>
                    </div>
                    <button type="submit" class="btn btn-primary">添加记录</button>
                </form>

                <!-- 预算设置 -->
                <div class="budget-management">
                    <h3>预算设置 (支出)</h3>
                    <table>
                        <thead>
                            <tr>
                                <th>分类</th>
                                <th>预算金额</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="budgetListBody">
                            <!-- 预算列表将在这里生成 -->
                        </tbody>
                    </table>
                </div>

            </div>

            <!-- 统计和图表 -->
            <div class="dashboard">
                <!-- 统计卡片 -->
                <div class="summary-cards">
                    <div class="card">
                        <h3>本月支出</h3>
                        <p id="monthlyExpense">¥0.00</p>
                    </div>
                    <div class="card">
                        <h3>本月收入</h3>
                        <p id="monthlyIncome">¥0.00</p>
                    </div>
                    <div class="card">
                        <h3>结余</h3>
                        <p id="balance">¥0.00</p>
                    </div>
                </div>

                <!-- 预算对比 -->
                <div class="budget-comparison">
                    <h4>本月预算使用情况</h4>
                    <table>
                        <thead>
                            <tr>
                                <th>分类</th>
                                <th>预算金额</th>
                                <th>支出金额</th>
                                <th>剩余预算</th>
                            </tr>
                        </thead>
                        <tbody id="monthlyBudgetComparisonList">
                            <!-- 预算对比详情将在这里生成 -->
                        </tbody>
                    </table>
                </div>

                <!-- 图表 -->
                <div class="charts">
                    <div class="chart-container">
                        <div class="chart-header" style="display:flex;align-items:center;justify-content:space-between;">
                            
                            <select id="categoryChartRange">
                                <option value="week">本周</option>
                                <option value="last-month">上月</option>
                                <option value="last-year">上年</option>
                                <option value="month">本月</option>
                                <option value="year">本年</option>
                                <option value="all">全部</option>
                            </select>
                        </div>
                        <div id="categoryChart" style="width:100%;height:320px;"></div>
                    </div>
                    <div class="chart-container">
                        <div class="chart-header" style="display:flex;align-items:center;justify-content:space-between;">
                            
                            <select id="trendChartRange">
                                <option value="week">本周</option>
                                <option value="last-month">上月</option>
                                <option value="last-year">上年</option>
                                <option value="month">本月</option>
                                <option value="year">本年</option>
                                <option value="all">全部</option>
                            </select>
                        </div>
                        <div id="trendChart" style="width:100%;height:320px;"></div>
                    </div>
                </div>

                <!-- 最近记录 -->
                <div class="records">
                    <h3>最近记录</h3>
                    <div class="filter-section">
                        <input type="text" id="searchKeyword" placeholder="搜索描述" class="form-control">
                        <button id="searchButton" class="btn btn-secondary">搜索</button>
                        <div class="amount-filter-group">
                            <input type="number" id="minAmount" placeholder="最小金额" class="form-control" step="0.01">
                            <span>-</span>
                            <input type="number" id="maxAmount" placeholder="最大金额" class="form-control" step="0.01">
                        </div>
                        <div class="second-row-filters">
                            <select id="filterCategory" class="form-control">
                                <option value="all">所有分类</option>
                                <!-- 分类选项将由 JavaScript 动态生成 -->
                            </select>
                            <select id="filterType" class="form-control">
                                <option value="all">所有类型</option>
                                <option value="expense">支出</option>
                                <option value="income">收入</option>
                            </select>
                            <button id="applyFilterBtn" class="btn btn-secondary">应用筛选</button>
                            <button id="resetFilterBtn" class="btn btn-secondary">重置筛选</button>
                        </div>
                    </div>
                    <table>
                        <thead>
                            <tr>
                                <th>日期</th>
                                <th>分类</th>
                                <th>描述</th>
                                <th>金额</th>
                                <th>编辑</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="recordsBody"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 个人中心 -->
    <div id="personalCenter" class="personal-center hidden">
        <div class="personal-info">
            <h2>个人中心</h2>
            <div id="userInfo">
                <p>用户名：<span id="usernameDisplay"></span></p>
                <p>注册时间：<span id="registerTime"></span></p>
                <p>记录总数：<span id="recordCount"></span></p>
            </div>
            <div class="personal-stats">
                <h3>统计信息</h3>
                <div class="stats-grid">
                    <div class="stat-card">
                        <h4>总支出</h4>
                        <p id="totalExpense">¥0.00</p>
                    </div>
                    <div class="stat-card">
                        <h4>总收入</h4>
                        <p id="totalIncome">¥0.00</p>
                    </div>
                    <div class="stat-card">
                        <h4>平均月支出</h4>
                        <p id="avgMonthlyExpense">¥0.00</p>
                    </div>
                    <div class="stat-card">
                        <h4>平均月收入</h4>
                        <p id="avgMonthlyIncome">¥0.00</p>
                    </div>
                </div>
            </div>

            <!-- 详细统计 -->
            <div class="detailed-stats">
                <h3>详细统计</h3>
                <div class="stats-grid">
                    <div class="stat-card">
                        <h4>最高单笔支出</h4>
                        <p id="maxExpense">¥0.00</p>
                    </div>
                     <div class="stat-card">
                        <h4>最高单笔收入</h4>
                        <p id="maxIncome">¥0.00</p>
                    </div>
                </div>

                <h4>各分类总支出</h4>
                <ul id="categoryTotalExpenseList">
                     <!-- 各分类总支出将在这里生成 -->
                </ul>

                 <h4>各分类总收入</h4>
                <ul id="categoryTotalIncomeList">
                     <!-- 各分类总收入将在这里生成 -->
                </ul>

                <!-- 可以根据需要添加更多详细统计，例如按年份/月份统计 -->

            </div>

            <!-- 分类管理 -->
            <div class="category-management">
                <h3>分类管理 (支出)</h3>
                <div class="add-category-form">
                    <input type="text" id="newCategoryName" class="form-control" placeholder="新分类名称" required>
                    <button id="addCategoryBtn" class="btn btn-primary">添加分类</button>
                </div>
                <ul id="categoryList">
                    <!-- 分类列表将在这里生成 -->
                </ul>
            </div>

            <button class="back-btn" onclick="backToMain()">返回主页</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html> 